<template>
     <div class="music-item">
            <div class="music-title">
                <div class="title-name"><slot></slot></div>
                <div class="clock-more">查看更多</div>
            </div>
            <ul class="music-info">
                <li v-for="item in list" :key="item.id">
                    <div class="music-info-img">
                        <img :src="item.picUrl" v-lazy="item.picUrl" alt="">
                        <div class="play-num" v-if="item.playCount"><i class="iconfont">&#xe600;</i>{{item.playCount | numFormate}}</div>
                    </div>
                    <div class="music-name">
                        {{item.name}}
                    </div>
                </li>
            </ul>
        </div>
</template>
<script>
export default {
    name:'musicListItem',
    props:{
        list:{
            type:Array,
            default:[]
        }
    }
}
</script>
<style lang="less" scoped>
    .music-item{
        padding-top:30px;
        .music-info{
            overflow: hidden;
            margin-right: -20px;
            margin-bottom: -20px;
            margin-top: 20px;
            display: flex;
            flex-wrap:wrap;
            justify-content: space-around;
            li{
                width: calc(calc(100% / 3) - 20px);
                margin-right: 20px;
                margin-bottom: 20px;
                .music-info-img{
                    position: relative;
                    width: 100%;
                    border-radius: 10px;
                    img{
                        width: 100%;
                        border-radius: 10px;
                    }
                    .play-num{
                        position: absolute;
                        top:4px;
                        right: 8px;
                        color: @color4;
                        font-size: 20px;
                        .iconfont{
                            font-size: 18px;
                            margin-right: 4px;
                        }
                    }
                    .radio-writer{
                        position: absolute;
                        bottom: 10px;
                        width: 95%;
                        overflow: hidden;    
                        text-overflow:ellipsis;    
                        white-space: nowrap;
                        font-size: 20px;
                        color: @color4;
                        padding-left: 10px;
                    }
                }
                .music-name{
                    text-overflow: -o-ellipsis-lastline;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    line-clamp: 2;
                    -webkit-box-orient: vertical;
                }
            }   
        }
        
    }
</style>